<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="keywords" content="网易公开课、中国大学MOOC、云课堂、视频教程、交流互动、免费、名师、实用、培训">
    <meta name="description" content="网易教育产品部是网易公司研发的一款大型在线教育平台服务，包含网易公开课、中国大学MOOC、云课堂三大平台，
    向学习者提供海量免费、优质课程，创新的个性化学习体验，自由开放的交流互动环境。">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">
    <title>网易教育产品部</title>
</head>

<body>
    <!--顶部消息通知-->
    <div class="tips">
        <div class="tips-content">
            <p class="text">网易云课堂微专业，帮助你掌握专业技能，令你求职或加薪多一份独特优势！</p>
            <a href="#" class="more">立即查看&gt;</a>
            <a href="#" class="close"><span class="no-tips"></span>不再提醒</a>
        </div>
    </div>
    <!--顶部消息通知-->
    <!--header-->
    <div class="header">
        <div class="navbar">
            <div class="left">
                <ul>
                    <li class="logo">EDU<span class="line"></span></li>
                    <li class="title">网易教育产品部</li>
                    <li class="follow">
                        <button class="btn-1"><span class="plus"></span>关注</button>
                        <button class="btn-2"><span class="tick"></span>已关注<i>|</i><a href="#">取消</a></button>
                    </li>
                    <li class="fans">粉丝<span>45</span></li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <li class="open-163"><a href="http://open.163.com/" target="_blank">网易公开课</a></li>
                    <li class="study-163"><a href="http://study.163.com/" target="_blank">云课堂</a></li>
                    <li class="icourse-163"> <a href="http://www.icourse163.org/" target="_blank">中国大学MOOC</a></li>
                    <li><a href=""><span class="search"></span></a></li>
                </ul>
            </div>
        </div>
        <div class="banner">
            <div class="banner-ft">
                <ul class="nav">
                    <li class="selected"><i></i></li>
                    <li><i></i></li>
                    <li><i></i></li>
                </ul>
            </div>
            <div class="banner-bd">
                <ul class="list">
                    <li class="show">
                        <a target="_blank" title="网易公开课" class="pic" href="http://open.163.com/">
                            <img src="img/banner1.jpg" alt="网易公开课">
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="网易云课堂" class="pic" href="http://study.163.com/">
                            <img src="img/banner2.jpg" alt="网易云课堂">
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="中国大学MOOC" class="pic" href="http://www.icourse163.org/">
                            <img src="img/banner3.jpg" alt="中国大学MOOC">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="school clearfix">
            <div class="commen school-1">
                <h2 class="title">网易公开课</h2>
                <p class="text">推出国内外名校公开课，涉及广泛的学科，名校老师认真讲解深度剖析，网易视频公开课频道搭建起强有力的网络视频教学平台。</p>
                <a target="_blank" href="http://open.163.com/" class="more">了解更多 ></a>
            </div>
            <div class="commen school-2">
                <h2 class="title">云课堂</h2>
                <p class="text">网易旗下大型在线学习平台，该平台面向学习者提供海量免费、优质课程,创新的个性化学习体验，自由开放的交流互动环境。</p>
                <a target="_blank" href="http://study.163.com/" class="more">了解更多 ></a>
            </div>
            <div class="commen school-3">
                <h2 class="title">中国大学MOOC</h2>
                <p class="text">是爱课程网携手云课堂打造的在线学习平台，每一个有提升愿望的人,都可以在这里学习中国最好的大学课程，学完还能获得认证证书。</p>
                <a target="_blank" href="http://www.icourse163.org/" class="more">了解更多 ></a>
            </div>
        </div>
    </div>
    <!--header-->
    <!--middle-->
        <div class="middle">
            <img src="img/pic1.jpg" alt="pic1">
            <img src="img/pic2.jpg" alt="pic2">
            <img src="img/pic3.jpg" alt="pic3">
            <img src="img/pic4.jpg" alt="pic4">
            <img src="img/pic5.jpg" alt="pic5">
        </div>
    <!--middle-->
    <!--content-->
    <div class="conttentbox">
        <div class="content clearfix" id="content">
            <div class="main">
                <div class="nav clearfix">
                    <a href="" id="aitem-1" class="item selected" data="10" name="aitem-1">产品设计</a>
                    <a href="" id="aitem-2" class="item" data="20" name="aitem-2">编程语言</a>
                </div>
                <div class="data-list clearfix">
                    <div class="data-list-item c-templete">
                        <a href="" class="wrap">
                            <img class="imgpic" src="">
                            <h3 class="tt"></h3>
                            <h4 class="org-name"></h4>
                            <div class="num">
                                <span class="hot"></span>
                                <h5 class="learnerCount"></h5>
                            </div>
                            <h5 class="price"></h5>
                            <h5 class="kind"><span class="kindname"></span></h5>
                            <p class="disc"></p>
                        </a>
                    </div>
                </div>
                <div class="pager">
                </div>
            </div>
            <div class="side">
                <div class="introduce">
                    <h2 class="title">机构介绍</h2>
                    <p>观看下面的视频来了解吧：</p>
                    <div class="playvideo">
                        <img src="img/video.jpg" alt="机构介绍">
                        <span class="play-btn"></span>
                    </div>
                </div>
                <div class="toplist">
                    <h2 class="title">最热排行</h2>
                    <div class="topbox">
                        <ul class="top">
                            <li class="item t-templete">
                                <a href="">
                                    <img src="" alt="" class="pic">
                                    <h3></h3>
                                    <div class="num">
                                        <span class="hot"></span>
                                        <h5></h5>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--content-->
    <!--footer-->
    <div class="footer">
        <div class="footerbox">
            <div class="info">
                <span class="logo"></span>
                <p>©2014 icourse163.org 浙ICP备08114786号-1<br> icourses.cn 京ICP备12020869号-2 京公网安备110102000459-2</p>
            </div>
            <ul class="links lk-1">
                <li>
                    <h4>友情链接：</h4>
                </li>
                <li><a href="" class="link">网易公开课</a></li>
                <li><a href="" class="link">网易云课堂</a></li>
                <li><a href="" class="link">中国大学MOOC</a></li>
            </ul>
            <ul class="links lk-2">
                <li>
                    <h4>我们：</h4>
                </li>
                <li><a href="" class="link">关于</a></li>
                <li><a href="" class="link">联系</a></li>
                <li><a href="" class="link">关注<span class="weibo"></span></a></li>
            </ul>
            <ul class="links">
                <li>
                    <h4>更多：</h4>
                </li>
                <li><a href="" class="link">常见问题</a></li>
                <li><a href="" class="link">意见反馈</a></li>
            </ul>
        </div>
    </div>
    <!--footer-->
    <!--login-->
    <div class="mask l-mask">
        <div class="login">
            <form action="http://study.163.com/webDev/login.htm" class="m-form" name="loginForm" autocomplete="off" method="get" target="result">
                <legend>
                    <h2 class="tit">登录网易云课堂</h2>
                </legend>
                <fieldset>
                    <div class="txt itm1">
                        <label for="account" class="lab a-lab">账号</label>
                        <input type="text" id="account" name="userName">
                    </div>
                    <div class="txt itm2">
                        <label for="password" class="lab p-lab">密码</label>
                        <input type="password" id="password" name="password">
                    </div>
                    <div class="wrap"><button class="btn" name="loginBtn">登 录</button></div>
                    <span class="closed">X</span>
                </fieldset>
            </form>
            <iframe name="result" id="result" style="display:none;"></iframe>
        </div>
    </div>
    <!--login-->
    <!--video-->
    <div class="mask v-mask">
        <div class="video">
            <h2 class="tt">请观看下面的视频</h2>
            <video src="https://mov.bn.netease.com/open-movie/nos/mp4/2014/12/30/SADQ86F5S_shd.mp4" controls="true" poster="img/poster.jpg">
                <embed autostart="false" type="applocation/x-shockwave-flash" src="https://mov.bn.netease.com/open-movie/nos/mp4/2014/12/30/SADQ86F5S_shd.mp4">
            </video>
            <span class="closed">X</span>
        </div>
    </div>
    <!--video-->
    <script src="js/public.js"></script>
    <script src="js/md5.min.js"></script>
    <script src="js/main.js"></script>
</body>

</html>